<div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin" style="padding: 20px 30px 0 0;">
    <div class="layui-row">
        <div class="layui-form-item">
            <label class="layui-form-label">选择工作流</label>
            <div class="layui-input-block">
                <select name="flow_id" lay-verify="required" lay-search="">
                    <option value="">直接选择或搜索选择</option>
                    {foreach $flow as $vo}
                    <option value="{$vo.id}" selected>{$vo.flowcode}-{$vo.flowname}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">项目名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" value="{$model.name ?? ''}" lay-verify="required"
                           placeholder="请输入项目名称" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">项目主管</label>
                <div class="layui-input-block">
                    <input type="text" name="executive" id="executive" value="{$model.user_name ?? ''}"
                           lay-verify="required" placeholder="请输入项目主管" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">执行区域</label>
                <div class="layui-input-block">
                    <input type="text" name="execution_area" id="execution_area" lay-verify="required"
                           placeholder="请输入执行区域"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-block">
                    <input type="text" name="start_time" id="start_time" lay-verify="required" placeholder="请输入开始时间"
                           autocomplete="off"
                           class="layui-input" readonly>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-block">
                    <input type="text" name="end_time" id="end_time" lay-verify="required" placeholder="请输入结束时间"
                           autocomplete="off"
                           class="layui-input" readonly>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">样本总量</label>
                <div class="layui-input-block">
                    <input type="text" name="sample_num" id="sample_num" lay-verify="required" placeholder="请输入样本总量"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>

    </div>
    <!--项目类型 -->
    <div class="layui-row" id="project_sample">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">项目类型</label>
                <div class="layui-input-block">
                    <input type="text" name="type_name[]" lay-verify="required" placeholder="请输入项目类型" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">主样本量</label>
                <div class="layui-input-block">
                    <input type="text" name="main_sample_num[]" lay-verify="required" id="main_sample_num" required
                           placeholder="请输入主样本量"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">放大样本量</label>
                <div class="layui-input-block">
                    <input type="text" name="enlarge_sample_num[]" lay-verify="required" id="enlarge_sample_num"
                           placeholder="请输入放大样本量" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

    </div>
    <div class="layui-row">
        <table class="layui-table" id="mytable">
            <thead>
            <tr>
                <th style="text-align: center;">计划成本12</th>
                <th style="text-align: center;">数量</th>
                <th style="text-align: center;">单价</th>
                <th style="text-align: center;">金额(元)</th>
                <th style="text-align: center;">备注</th>
                <th style="text-align: center;"></th>
            </tr>
            </thead>
            <tbody id="index-table">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td style="text-align: center;"><span id="total">

                    0
                </span></td>
                <td style="text-align: center;">
                    <button class="layui-btn hj">计算</button>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <select name="cost_id[]" lay-search="" lay-filter="encrypt" lay-verify="required" id="select">
                        <option value="">直接选择或搜索选择</option>
                        {foreach $plan as $key=>$vo}
                        <option value="{$vo.id}">{$vo.name}</option>
                        {/foreach}
                    </select>
                </td>
                <td style="text-align: center;">
                    <input type="number " lay-verify="number" name="num[]" lay-verify="required" placeholder="1,2,3,4"
                           autocomplete="off"
                           class="layui-input input num">
                </td>
                <td style="text-align: center;">
                    <input type="number" name="unit_price[]" placeholder="￥" lay-verify="required" autocomplete="off"
                           class="layui-input input price">
                </td>
                <td style="text-align: center;">
                    <input type="number" placeholder="￥" id="final" autocomplete="off" name="sum_of_money[]"
                           class="layui-input final" disabled>
                </td>
                <td style="text-align: center;"><input type="text" name="remark[]"
                                                       placeholder="请输入备注" autocomplete="off"
                                                       class="layui-input"></td>
                <td></td>
            </tr>

            </tbody>
        </table>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-back-submit" id="LAY-user-back-submit" value="确认">
    </div>
</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
    }).use(['index', 'form', 'laydate'], function () {
        var $ = layui.jquery, form = layui.form
            , laydate = layui.laydate;
        var arr = []; //金额数组
        var select;
        laydate.render({
            elem: '#start_time'
            , value: "{$start_time ?? ''}"
            , format: "yyyy-MM-dd"
            , trigger: 'click'//呼出事件改成click
        });
        laydate.render({
            elem: '#end_time'
            , value: "{$end_time ?? ''}"
            , format: "yyyy-MM-dd"
            , trigger: 'click'//呼出事件改成click
        });
        form.render();
        select = ($("#select").html())
        //样本类型处理
        form.on('select(encrypt)', function (data) {
            var text = (data.elem[data.elem.selectedIndex].text);
            if (text === '其他') {
                layer.prompt(function (val, index) {
                    layer.msg('得到了' + val);
                    $.ajax({
                        url: "{:url('admin/Project/ProjectPlan')}",
                        type: 'post',
                        data: {
                            "value": val
                        },
                        success: function (res) {
                            if (res.code === 200){
                                document.getElementById("select").options.add(new Option(val, res.data.plan_id));
                                select = ($("#select").html())
                            }
                        }
                    });
                    layer.close(index);
                })
            }
        })
        var sample_html = "";
        sample_html += "  <div class=\"layui-row\">";
        sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md4\">"
        sample_html += " <div class=\"layui-form-item\"> <label class=\"layui-form-label\">项目类型</label>";
        sample_html += " <div class=\"layui-input-block\">  <input type=\"text\" name=\"type_name[]\" required placeholder=\"请输入项目类型\" autocomplete=\"off\"\n" +
            "                           class=\"layui-input\">\n" +
            "                </div>"
        sample_html += "</div>"
        sample_html += "</div>"
        sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md4\">"
        sample_html += " <div class=\"layui-form-item\"> <label class=\"layui-form-label\">主样本量</label>";
        sample_html += " <div class=\"layui-input-block\">  <input type=\"text\" name=\"main_sample_num[]\" required placeholder=\"请输入主样本量\" autocomplete=\"off\"\n" +
            "                           class=\"layui-input\">\n" +
            "                </div>"
        sample_html += "</div>"
        sample_html += "</div>"
        sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md3\">"
        sample_html += " <div class=\"layui-form-item\"> <label class=\"layui-form-label\">放大样本量</label>";
        sample_html += " <div class=\"layui-input-block\">  <input type=\"text\" name=\"enlarge_sample_num[]\" required placeholder=\"请输入放大样本量\" autocomplete=\"off\"\n" +
            "                           class=\"layui-input\">\n" +
            "                </div>"
        sample_html += "</div>"
        sample_html += "</div>"
        sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md1\">";
        sample_html += " <button class=\"layui-btn add_sample\"\n" +
            "                    style=\"height: 35px !important;line-height: 35px !important;padding: 0px 28px !important; margin-top: 1px;\">\n" +
            "                新增\n" +
            "            </button>";
        sample_html += "</div>";
        sample_html += "</div>";
        $('#project_sample').append(sample_html);
        //点击按钮新增
        $("body").on('click', '.add_sample', function () {
            var $content = "";
            $content += ' <button class="layui-btn del-sample" style="height: 35px !important;line-height: 35px !important;padding: 0px 28px !important; margin-top: 1px;">删除</button>';
            $(this).parent().append($content);
            //去除加号
            this.remove();

            var sample_html = "";
            sample_html += "  <div class=\"layui-row\">";
            sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md4\">"
            sample_html += " <div class=\"layui-form-item\"> <label class=\"layui-form-label\">项目类型</label>";
            sample_html += " <div class=\"layui-input-block\">  <input type=\"text\" name=\"type_name[]\" required placeholder=\"请输入项目类型\" autocomplete=\"off\"\n" +
                "                           class=\"layui-input\">\n" +
                "                </div>"
            sample_html += "</div>"
            sample_html += "</div>"
            sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md4\">"
            sample_html += " <div class=\"layui-form-item\"> <label class=\"layui-form-label\">主样本量</label>";
            sample_html += " <div class=\"layui-input-block\">  <input type=\"text\" name=\"main_sample_num[]\" required placeholder=\"请输入主样本量\" autocomplete=\"off\"\n" +
                "                           class=\"layui-input\">\n" +
                "                </div>"
            sample_html += "</div>"
            sample_html += "</div>"
            sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md3\">"
            sample_html += " <div class=\"layui-form-item\"> <label class=\"layui-form-label\">放大样本量</label>";
            sample_html += " <div class=\"layui-input-block\">  <input type=\"text\" name=\"enlarge_sample_num[]\" required placeholder=\"请输入放大样本量\" autocomplete=\"off\"\n" +
                "                           class=\"layui-input\">\n" +
                "                </div>"
            sample_html += "</div>"
            sample_html += "</div>"
            sample_html += " <div class=\"layui-col-xs12 layui-col-sm12 layui-col-md1\">";
            sample_html += " <button class=\"layui-btn add_sample\"\n" +
                "                    style=\"height: 35px !important;line-height: 35px !important;padding: 0px 28px !important; margin-top: 1px;\">\n" +
                "                新增\n" +
                "            </button>";
            sample_html += "</div>";
            sample_html += "</div>";
            $('#project_sample').append(sample_html);

            /**
             * 删除事件
             */
            $("body").on('click', '.del-sample', function () {
                //获取当前点击的元素的父级的父级进行删除
                $(this).parent().parent().remove();
            })
        });

        //表格处理
        var html = "";
        html += "<tr>";
        html += "<td><select name=\"cost_id[]\" id=\"select\" lay-filter=\"encrypt\" lay-search=\"\">"
        html += select
        html += "</select>";
        html += "</td>";
        html += "<td> <input type=\"number \"  name=\"num[]\" placeholder=\"1,2,3,4\" autocomplete=\"off\"\n" +
            "                           class=\"layui-input input num\">";
        html += "</td>"
        html += "<td> <input type=\"number \" l name=\"unit_price[]\" placeholder=\"￥\" autocomplete=\"off\"\n" +
            "                           class=\"layui-input input price\">";
        html += "</td>"
        html += "<td style='text-align: center;'> <input type=\"number \"  name='sum_of_money[]'  placeholder=\"￥\" autocomplete=\"off\"\n" +
            "                           class=\"layui-input final\" disabled>";
        html += "</td>"
        html += "<td><input type=\"text\" name=\"remark[]\"\n" +
            "placeholder=\"请输入备注\" autocomplete=\"off\"\n" +
            "class=\"layui-input\">";
        html += "</td>"
        html += "<td><i class=\"iconfont icon-xinzeng addInputReturn\" id=\"addTable\" style=\"cursor:pointer;\"></i>"
        html += "</td>"
        html += "</tr>"

        $("#index-table").append(html);
        $("body").on('click', '.addInputReturn', function () {
            var $content = "";
            $content += '<a href="javascript:;" class="delInput" >';
            $content += '<i class="layui-icon">&#x1006;</i>';
            $content += '</a>';
            $(this).parent().append($content);
            //去除加号
            this.remove();

            var html = "";
            html += "<tr>";
            html += "<td><select name=\"cost_id[]\" id=\"select\" lay-filter=\"encrypt\" lay-search=\"\">"
            html += select
            html += "</select>";
            html += "</td>";
            html += "<td> <input type=\"number \" name=\"num[]\" placeholder=\"1,2,3,4\" autocomplete=\"off\"\n" +
                "                           class=\"layui-input input num\">";
            html += "</td>"
            html += "<td> <input type=\"number \"  name=\"unit_price[]\" placeholder=\"￥\" autocomplete=\"off\"\n" +
                "                           class=\"layui-input input price\">";
            html += "</td>"
            html += "<td style='text-align: center;'> <input type=\"number \" name='sum_of_money[]' placeholder=\"￥\" autocomplete=\"off\"\n" +
                "                           class=\"layui-input final\" disabled>";
            html += "</td>"
            html += "<td><input type=\"text\" name=\"remark[]\"\n" +
                "placeholder=\"请输入备注\" autocomplete=\"off\"\n" +
                "class=\"layui-input\">";
            html += "</td>"
            html += "<td><i class=\"iconfont icon-xinzeng addInputReturn\" id=\"addTable\" style=\"cursor:pointer;\"></i>"
            html += "</td>"
            html += "</tr>"
            $("#index-table").append(html);
            form.render();

        });

        /**
         * 删除事件
         */
        $("body").on('click', '.delInput', function () {
            //获取当前点击的元素的父级的父级进行删除

            var aaa = $(this).parent().parent().find('input.final').val();
            $(this).parent().parent().remove();
            arr.removeByValue(aaa);
            // var total = eval(arr.join("+"));
            // $('#total').text(total);
        });
        $("body").on('click', '.hj', function () {
            var a = [];
            $('#mytable').find("input.final").each(function (i, v) {
                // var b;
                if (v.value !== "") {
                    a.push(v.value);
                }
            })

            var total = eval(a.join("+"));
            $('#total').text(total);
        })

        form.render();
        input_enterKeydown(); //初始化

        //文本框焦点
        $('body').on('blur', '.input', function () {
            var value = $(this).val();
            if (value != null && value != '') {
                if (!(value)) {
                    $(this).val("");
                    return false;
                } else {
                    var num = $(this).parents("tr").find("input.num").val();
                    var price = $(this).parents("tr").find("input.price").val();
                    var final = num * price;
                    $(this).parents("tr").find("input.final").val(final);
                    var a = [];
                    $('#mytable').find("input.final").each(function (i, v) {
                        // var b;
                        if (v.value !== "") {
                            a.push(v.value);
                        }
                    })
                    var total = eval(a.join("+"));
                    $('#total').text(total);
                    // if (final != 0) {
                    //     arr.push(final);
                    // }
                    //
                    // $(this).parents("tr").find("input.final").val(final);
                    //
                    // var total = eval(arr.join("+"));
                    // $('#total').text(total);

                }
            }
        });

        //验证规则
        function validateInput(value) {
            var regex = /^(\d{1,10}|100000)$/;
            if (!regex.test(value)) {
                layer.msg("请填写0~100000的数字，包含0和100000", {icon: 2});
                return false;
            }
            return true;
        }

        // enter回车时，跳转到下一个input元素
        function input_enterKeydown() {
            var $input = $('input:text:not(:disabled)');
            $input.bind("keydown", function (e) {
                var n = $input.length;
                if (e.which == 13) {
                    e.preventDefault(); //Skip default behavior of the enter key
                    var nextIndex = $input.index(this) + 1;
                    if (nextIndex < n)
                        $input[nextIndex].focus();
                    else
                        $input[nextIndex - 1].blur();
                }
            });
        }

        function addProductClassify() {
            layer.open({
                type: 1,
                btn: ['确定', '取消'],
                content: $("#select_prod"),
                area: ['270px', '160px'],
                //当前层索引参数（index）、当前层的DOM对象（layero）
                yes: function (index, layero) {
                    //获取input输入的值
                    var ivalue = $(layero).find("input").val();
                    //获取要添加的option的索引
                    var sIndex = $("#zcySelect")[0].options.length - 1;
                    if (ivalue == null || ivalue == '') {
                        layer.msg("请输入产品类别")
                    } else {
                        layer.msg("输入的产品类别是：" + ivalue);
                        //为select添加option
                        $("#zcySelect").append("<option value=" + sIndex + ">" + ivalue + "</option>");
                        renderForm();//表单重新渲染，要不然添加完显示不出来新的option
                        layer.close(index);
                    }
                    $(layero).find("input").val('');
                }
            })
        }

    });

    Array.prototype.removeByValue = function (val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) {
                this.splice(i, 1);
                break;
            }
        }
    };

</script>
